<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJSBootStrapPageable</title>
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css" />
		<script type="text/javascript" src="../js/angular.min.js" ></script>
	</head>
	<!--<body ng-app="myapp">-->
	<!--<body>-->
	<body ng-app="paginationApp" ng-Controller="paginationCtrl">
		<!--<div>
			<h1>HEAD</h1>
			<a href="#/JavaEE">JavaEE</a>
			<a href="#/IOS">IOS</a>
			<a href="#/Android">Android</a>
		</div>
		<div ng-view>
			
		</div>
		<div>
			<h1>FOOT</h1>
		</div>-->
		<table class="table table-bordered">
			<tr>
				<th>序号</th>
				<th>商品编号</th>
				<th>名称</th>
				<th>价格</th>
			</tr>
			<!--<tr>
				<td>1</td>
				<td>1001</td>
				<td>冰箱</td>
				<td>2000</td>
			</tr>-->
			<tr ng-repeat="product in products track by $index">
				<td>{{ $index+1 }}</td>
				<td>{{ product.id }}</td>
				<td>{{ product.name }}</td>
				<td>{{ product.price }}</td>
			</tr>
		</table>
		<!--  分页按钮 -->
			<div>
				<ul class="pagination pull-right">
					<li>
						<a href ng-click="prev()">上一页</a>
						<!--<a href>上一页</a>-->
					</li>
					<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
						<a ng-click="selectPage(page)">{{ page }}</a>
					</li>
					<!--<li>
						<a>1</a>
						<a>2</a>
					</li>-->
					<li>
						<a href ng-click="next()">下一页</a>
						<!--<a href>下一页</a>-->
					</li>
				</ul>
			</div>
	</body>
	<script type="text/javascript">
		/*var myapp = angular.module('myapp',['ngRoute']);
		myapp.config(["$routeProvider",function($routeProvider){
			$routeProvider
			 .when('/JavaEE',{
			 	templateUrl: '5_1RouteJavaEE.html'
			 	
			 }).when('/IOS',{
			 	templateUrl: '5_2RouteIOS.html'
			 	
			 }).when('/Android',{
			 	templateUrl: '5_3RouteAndroid.html'
			 	
			 }).otherwise({
			 	redirectTo: '/JavaEE'
			 });
		}]);*/
		var paginationApp =angular.module("paginationApp",[]);
		paginationApp.controller("paginationCtrl",["$scope","$http",
		  function($scope,$http){
			
			$scope.currentPage = 1;
			$scope.pageSize = 4;
			$scope.totalCount = 0;
			$scope.totalPages = 0;
			
			$scope.pageList = new Array();
			
			$scope.prev = function(){
				$scope.selectPage($scope.currentPage - 1);
			}
			
			$scope.next = function(){
				$scope.selectPage($scope.currentPage + 1);
			}
			
			$scope.selectPage = function(page){
				if ($scope.totalPages != 0 && (page<1 || page>$scope.totalPages)) {
					return;
				}
				
				$http({
					method : 'GET',
					url : '6_'+page+'.json',
					params : {
								page : page,
								pageSize : $scope.pageSize
							 }
				  }).success(function(data,status,headers,config){
							$scope.products = data.products;
							
							$scope.totalCount = data.totalCount;
							$scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
							
							$scope.currentPage = page;
							
							var begin;
							var end;
							
							begin = $scope.currentPage -5;
							if (begin < 1) {
								begin = 1;
							}
							
							end = begin + 9;
							if (end > $scope.totalPages) {
								end = $scope.totalPages;
							}
							
							begin = end - 9;
							if (begin <1) {
								begin = 1;
							}
							
							for (var i = begin; i <= end; i++) {
								$scope.pageList.push(i);
							}
							
				  }).error(function(data,status,headers,config){
							alert("出错,请联系管理员!");
				  });
			}
			
			$scope.isActivePage = function(page){
				return page === $scope.currentPage;
			}
			
			$scope.selectPage(1);
			
			/*$http({
					method : 'GET',
					url : '6_1.json',
					params : {
								
							 }
				  }).success(function(data,status,headers,config){
							$scope.products = data.products;
				  }).error(function(data,status,headers,config){
							alert("出错,请联系管理员!");
				  });*/
		}]);
	</script>
</html>
